<template>
  <view class="desk-com">
    <view class="top flex flex-btw">
      <view class="title">{{ desk.tableNo }}号</view>
      <view class="flex operation">
        <view class="bind" v-if="!desk.codeNo" @click="bindDesk"
          >绑定二维码</view
        >
        <view class="edit" @click="editDesk">编辑</view>
        <view class="delete" @click="deleteDesk">删除</view>
      </view>
    </view>
    <view v-if="desk.codeNo" class="bottom flex flex-btw">
      <view>已绑定</view>
      <view @click="unBindDesk()">解绑</view>
    </view>
  </view>
</template>
<script>
import {
  updateTable,
  deleteTable,
  unBinddesk,
} from "@/service/api/sp-product/index";
export default {
  data() {
    return {};
  },
  props: {
    desk: {
      require: true,
      default: {},
      type: Object,
    },
  },
  methods: {
    bindDesk() {
      let query = { type: "tableCodeManagement", ...this.desk };
      this.$myTool.jumpPage("/pages/scan/index", query);
    },
    deleteDesk() {
      let {
        desk: { id, codeNo },
      } = this;
      uni.showModal({
        content: `${
          codeNo
            ? "当前桌位号已绑定，是否删除？删除后桌码将失效，桌码可再次绑定"
            : "是否删除当前座位号？"
        }`,
        success: (res) => {
          if (res.confirm) {
            deleteTable({ id }).then((res) => {
              this.$parent.getDesk(1);
            });
          }
        },
      });
    },
    editDesk() {
      this.$parent.editDesk(this.desk);
    },
    unBindDesk() {
      uni.showModal({
        content: "是否解绑当前桌码，解绑后桌码可再次绑定",
        success: (res) => {
          if (res.confirm) {
            let { id: tableId, codeNo: qrCode } = this.desk;
            unBinddesk({ tableId, qrCode }).then((res) => {
              this.$parent.getDesk(1);
            });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.desk-com {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 40rpx 28rpx;
  border-radius: 12rpx;

  .top {
    .title {
      font-size: 29rpx;
      font-weight: 500;
      color: #131313;
    }
    .operation {
      white-space: nowrap;
      font-size: 26rpx;
      > view {
        margin-right: 50rpx;
      }
      > view:last-child {
        margin-right: 0rpx;
      }
      .bind {
        color: var(--theme);
      }
      .edit {
        color: #2f65ff;
      }
      .delete {
        color: #888888;
      }
    }
  }
  .bottom {
    margin-top: 25rpx;
    font-size: 26rpx;
    > view:first-child {
      color: #888;
    }
    > view:last-child {
      color: var(--theme);
    }
  }
}
</style>
